<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Relative Plugin Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<script type="text/javascript" src="../src/tweenjs/plugins/RelativePlugin.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	function init() {
		// set up our stage:
		stage = new createjs.Stage("canvas1");

		var circle = new createjs.Shape();
		circle.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
		circle.x = 100;
		circle.y = stage.canvas.height/2;

		stage.addChild(circle);
		
		// install the plugin:
		createjs.RelativePlugin.install();

		// set up a tween that tweens between scale 0.3 and 1 every second.
		createjs.Tween.get(circle, {loop: -1, bounce:true})
			.to({x:"+100"}, 1000) // move 100px to the right
			.to({alpha:"-0.5", y:"-50"}, 1000); // fade out 50% and move 50px up

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", stage);
	}
</script>
</head>

<body onload="init();">

<header class="TweenJS">
	<h1>RelativePlugin Example</h1>

	<p>This example demonstrates the RelativePlugin, which lets you specify relative values in a tween by using a string ("+200", "-50").</p>
</header>

<canvas id="canvas1" width="960" height="350"></canvas>
<br/>
<input type="button" value="toggle paused"
	   onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">
</body>
</html>
